<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- muiUI -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css">

    <!-- mescroll.min.css -->
    <link rel="stylesheet" href="./assets/plugins/mescroll/css/mescroll.min.css">

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- 重置样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />

    <!-- 公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css" />

    <!-- 页面独立的 -->
    <link rel="stylesheet" href="./assets/css/index.css" />

    <style>
        .mescroll {
            position: fixed;
            top: 70px;
            bottom: 0;
            height: auto;
            /*如设置bottom:50px,则需height:auto才能生效*/
        }

        .operate {
            display: inline-block;
            width: 100%;
            display: flex;
            justify-content: right;
        }

        .operate button {
            margin: 5px 5px;
        }
    </style>
</head>

<body>
    <!-- 搜索 -->
    <div class="search">
        <div class="box">
            <div class="icon">
                <span class="glyphicon glyphicon-search"></span>
            </div>

            <input class="input" placeholder="请输入分类" />

            <button class="btn" size="mini" type="default">搜索</button>
        </div>
    </div>

    <!-- 列表 -->
    <div id="mescroll" class="contact mescroll wow fadeInUp data-wow-delay=" 100ms">
        <div class="list"></div>
    </div>

    <!-- 底部 -->
    <div class="tabbar">
        <div class="box">
            <a href="index.html" class="item">
                <span class="icon glyphicon glyphicon-home"></span>
                <span class="name">首页</span>
            </a>
            <a href="ContactAdd.html" class="item">
                <span class="icon glyphicon glyphicon-list-alt"></span>
                <span class="name">新建</span>
            </a>
            <a href="UserIndex.html" class="item">
                <span class="icon glyphicon glyphicon-user"></span>
                <span class="name">我的</span>
            </a>
        </div>
    </div>
</body>

</html>
<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- muiUI -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- axios -->
<script src="./assets/plugins/axios/axios.min.js"></script>

<!-- 自己封装的接口文件 -->
<script src="./assets/plugins/axios/request.js"></script>

<!-- 引入cookie封装文件 -->
<script src="./assets/plugins/cookie.js"></script>

<!-- 导入mescroll.min.js -->
<script src="./assets/plugins/mescroll/js/mescroll.min.js"></script>

<!-- 引入登录判断的文件 -->
<script src="./assets/plugins/login.js"></script>
<script>
    //实例化wow.js
    new WOW().init();

    //全局分类
    var search = '';
    var page = 1; //当前页码数
    var limit = 10; //每页显示多少条数据

    //获取用户信息
    var business = cookie.get('business') ? JSON.parse(cookie.get('business')) : {};


    //下拉列表 下拉对象
    var mescroll = new MeScroll('mescroll', {
        //下拉参数
        down: {
            auto: false, //关闭掉 初始化的下拉动作
            callback: down, //下拉的回调函数
        },

        //上拉参数
        up: {
            auto: true, //一进来的时候，触发上拉的动作
            isBounce: false,//此处禁止ios回弹,解析(务必认真阅读,特别是最后一点): http://www.mescroll.com/qa.html#q10
            callback: up, //上拉的回调函数
            toTop: {
                duration: 600,
                src: "./assets/images/mescroll-totop.png",
                offset: 100, //默认滚动到1000px显示,可配置offset修改
            }
        }
    })

    //下拉
    function down() {
        //重置上拉状态为 第一页 page = 1
        mescroll.resetUpScroll()

        // 清空列表
        $("#mescroll .list").empty()
    }

    //上拉
    async function up(current) {
        page = current.num
        limit = current.size

        //组装数据
        var data = {
            page,
            limit,
            search,
            businessid: business.id
        }

        //发请求
        var result = await POST({
            url: 'card/type/index',
            params: data
        })

        //结果为空，没有数据了
        if (result.code == 0) {
            mui.toast(result.msg, { duration: 1000 })
            //暂无更多数据
            mescroll.endBySize(0, 0)
            return false
        }

        var list = result.data.list
        var count = result.data.count

        //设置下拉的状态
        mescroll.endBySize(list.length, count)

        //渲染数据
        FetchList(list)
    }

    //渲染数据方法
    function FetchList(list) {
        var html = ''

        for (var item of list) {
            var _adrobj = JSON.stringify(item).replace(/"/g, "'");
            html += `
            <div class="item">
                <div class="content">
                    <h3 class="title">
                        <a href="编辑界面地址">${item.name}</a>
                    </h3>
                </div>
                
                <div class="operate">
                    <button type="button" onclick="edit(${_adrobj})" class="mui-btn mui-btn-primary">编辑</button>
                    <button type="button" onclick="dele(${_adrobj})" class="mui-btn mui-btn-danger">删除</button>
                </div>
               
            </div>`
        }

        $("#mescroll .list").append(html);
    }

    //搜索按钮
    $(".btn").click(async function () {
        //获取input框中的数据
        var searchText = $(".box input").val()

        //组装数据
        var data = {
            page,
            limit,
            businessid: business.id,
            search: searchText,
        }

        //发起请求
        var result = await POST({
            url: "/card/type/index",
            params: data
        })

        //判断是否删除成功
        if (result.code == 0) {
            mui.toast(result.msg)
            return false
        } else {
            mui.toast(result.msg, { duration: 1000 })
            setTimeout(() => {
                // 清空列表
                $("#mescroll .list").empty()
                //渲染数据
                FetchList(result.data.list)
            }, 1000)
            return false
        }
    })

    //删除按钮
    function dele(obj) {

        var typeid = obj.id;

        //删除确认弹框
        mui.confirm(`确认是否删除 \"${obj.name}\"`, "删除提示", ["退出", "删除"], async function (res) {
            if (!res.index == 0) {
                //组装数据
                var data = {
                    businessid: business.id,
                    typeid: typeid
                }

                //发起接口请求
                var result = await POST({
                    url: "/card/type/del",
                    params: data
                })
                //判断是否删除成功
                if (result.code == 0) {
                    mui.toast(result.msg)
                    return false
                } else {
                    mui.toast(result.msg, { duration: 1000 })
                    setTimeout(() => {
                        location.reload()
                    }, 1000)
                    return false
                }
            }
        })

    }

    //编辑按钮
    function edit(obj) {
        //弹出输入框
        var name
        mui.prompt('请输入修改内容', `${obj.name}`, '编辑分类', ['退出', '编辑'], async function (res) {
            //判断点击的是退出还是编辑
            //点击编辑按钮
            if (!res.index == 0) {
                //获取输入框内容
                var inputTet = $.trim($(".mui-popup-input input").val())
                if (inputTet == "") { name = obj.name } else {
                    name = inputTet
                }

                //组装数据
                var data = {
                    typeid: obj.id,
                    businessid: business.id,
                    name
                }

                //发起接口请求
                var result = await POST({
                    url: "/card/type/edit",
                    params: data
                })

                //判断是否编辑成功
                if (result.code == 0) {
                    mui.toast(result.msg)
                    return false
                } else {
                    mui.toast(result.msg, { duration: 1000 })
                    setTimeout(() => {
                        location.reload()
                    }, 1000)
                    return false
                }
            }
        }, 'div')

    }
</script>